<template>
<!-- 晨会看板 -->
  <div class="morning-container">
    <div class="morning-btn">
      <div class="btn-groups">
        <span class="default-btn-board" :class="{ active: isClick }" @click="handleClick(true)">晨会看板</span>
        <!-- <span class="default-btn-board" :class="{ active: isClick }" @click="handleClick(true)">日看板</span> -->
        <!-- <span class="default-btn-board" :class="{ active: !isClick }" @click="handleClick(false)">月看板</span> -->
      </div>
      <div class="btn-time">
        <date-time v-if="isClick" ref="dataTimeDayRef" @date="handleChange" />
        <date-time v-else ref="dataTimeMonthRef" datetype="year-month" @date="handleChange" />
      </div>
    </div>
    <!-- 月收入 -->
    <month-income ref="monthIncomeRef" v-show="!isClick" />
    <!-- 发展 -->
    <board-advance ref="advanceRef" :flag="isClick" />
    <!-- 维系 -->
    <board-sustain ref="sustainRef" :flag="isClick" />
    <!-- 智家 -->
    <board-wise ref="wiseRef" :flag="isClick" />
    <!-- 交付 -->
    <board-deliver v-show="isClick" ref="deliverDayRef" />
    <!-- 日收入 -->
    <!-- <day-income ref="dayIncomeRef" v-show="isClick" /> -->
    <!-- 欠费 -->
    <!-- <board-arrear ref="arrearRef" :flag="isClick" /> -->
  </div>
</template>

<script>
import dateTime from '@/components/common/dateTime.vue'
import boardAdvance from '@/views/components/publicline/board/advance.vue'
import boardSustain from '@/views/components/publicline/board/sustain.vue'
import boardWise from '@/views/components/publicline/board/wise.vue'
import boardDeliver from '@/views/components/publicline/board/deliver.vue'
import dayIncome from '@/views/components/publicline/board/dayIncome.vue'
import monthIncome from '@/views/components/publicline/board/monthIncome.vue'
import boardArrear from '@/views/components/publicline/board/arrear.vue'

import * as dayjs from "dayjs"
import { accountDate } from '@/api/common.js'

export default {
  components: { dayIncome, monthIncome, dateTime, boardAdvance, boardSustain, boardWise, boardDeliver, boardArrear },
  data() {
    return {
      isClick: true,
      dayId: '',
      monthId: '',
      wiseInfo: {},
      deliverInfo: {}
    }
  },
  mounted() {
    this.handleClick(this.isClick)
  },
  methods: {
    handleClick(flag) {
      this.isClick = flag
      if (this.isClick) this.getAccountDate()
      if (!this.isClick) this.getAccountMonthDate()
    },
    // 获取日账期
    async getAccountDate() {
      const res = await accountDate({ PARAMCODE: 'D' })
      const { result, success } = res
      if (success) {
        this.dayId = dayjs(result[0].value).format('YYYY-MM-DD')
        this.$refs.dataTimeDayRef.initDateTime(this.dayId)
        this.getDayData()
      }
    },
    // 获取日数据
    getDayData() {
      let params = {
        orgId: this.$dataPermission
      }
      if(this.isClick) {
        params = {
          ...params,
          dayId: dayjs(this.dayId).format('YYYYMMDD'),
        }
      }
      if(!this.isClick) {
        params = {
          ...params,
          monthId: dayjs(this.monthId).format('YYYYMM'),
        }
      }
      this.$refs.advanceRef.getMorningAdvance(params)
      this.$refs.sustainRef.getMorningSustain(params)
      this.$refs.wiseRef.getMorningWise(params)
      if(this.isClick) {
        this.$refs.deliverDayRef.getMorningDayDeliver(params)
        this.$refs.dayIncomeRef.getMorningIncome(params)
      }
      if(!this.isClick) {
        this.$refs.monthIncomeRef.getMonthIncome(params)
      }
      this.$refs.arrearRef.getMorningArrear(params)
    },
    // 获取月账期
    async getAccountMonthDate() {
      const res = await accountDate({ PARAMCODE: 'M' })
      const { result, success } = res
      if (success) {
        this.monthId = dayjs(result[0].value).format('YYYY-MM')
        this.$refs.dataTimeMonthRef.initDateTime(this.monthId)
        this.getDayData()
      }
    },
    // 获取改变的账期
    handleChange(val) {
      if (this.isClick) this.dayId = val
      if (!this.isClick) this.monthId = val
      this.getDayData()
    },
  }
}
</script>
<style lang="less" scoped>
.morning-container {
  padding-bottom: 10px;
  .morning-btn {
    padding: 10px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .default-btn-board {
      border-radius: 3px;
      color: #333;
      width: 70px;
      height: 24px;
      display: inline-block;
      line-height: 24px;
      text-align: center;
      font-size: 12px;
      background: #EFF2F5;
      margin-right: 16px;
      &:last-child {
        margin-right: 0;
      }
      &.active {
        background: #4D98FF;
        color: #fff;
      }
    }
    .btn-time .seller{
      /deep/ .van-cell {
        padding: 0 16px;
        font-size: 12px;
        background-color: unset;
        .van-cell__value--alone {
          color: #666;
        }
      }
    }
  }
  .board-content {
    margin-bottom: 12px;
  }
  /deep/ .van-loading {
    text-align: center;
    margin: 40px 0;
  }
}
</style>